/* ... your existing CSS ... */

/* ======================================================= */
/* 📱 General Mobile/Small Screen Styles (max-width: 768px) */
/* ======================================================= */
@media screen and (max-width: 768px) {
    /* --- Universal/Body --- */
    /* Adjust font-size for better readability on smaller devices if needed */
    body {
        font-size: 16px;
    }

    /* --- Navbar Style --- */
    .navbar {
        padding: 15px 5%; /* Adjust padding */
    }

    .navbar .logo {
        font-size: 28px; /* Smaller logo */
        z-index: 1001; /* Ensure logo is above the menu toggle */
    }
    
    /* Hide the list by default on small screens */
    .navbar .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%; /* Full width for the overlay menu */
        height: 100vh;
        background: rgba(0, 0, 0, 0.9); /* Dark overlay */
        padding-top: 80px; /* Space for the logo */
        text-align: center;
        transition: transform 0.3s ease-in-out;
        transform: translateX(100%); /* Start off-screen */
    }

    /* Target the list items */
    .navbar ul li {
        display: block; /* Stack links vertically */
        margin: 20px 0;
    }

    /* Target the links */
    .navbar ul li a {
        font-size: 18px; /* Larger link text in the full-screen menu */
        padding: 10px 30px;
        border: 1px solid #fff; /* Thinner border for cleaner look */
    }

    /* --- Hero Content Style --- */
    .content h1 {
        font-size: 60px; /* Significantly smaller heading */
    }

    .content p {
        font-size: 18px; /* Smaller paragraph text */
        margin: 10px 10px 0; /* Add horizontal margin to prevent touching screen edges */
    }

    .content a {
        font-size: 20px; /* Smaller CTA button */
        padding: 8px 40px;
    }

    /* --- About Section (Team) Style --- */
    .pro-about {
        height: auto; /* Allow content to dictate height */
        padding-bottom: 50px; /* Add padding at the bottom */
    }

    .content h1 {
        /* Re-using the class, but need to ensure 'Our Team' heading is responsive too */
        font-size: 40px;
        padding-top: 80px;
        padding-bottom: 40px;
    }

    .pro-row {
        margin-left: 20px; /* Smaller horizontal margin */
        margin-right: 20px;
    }

    .content-pro {
        /* Change grid to 1 column on small screens */
        grid: auto / auto;
        grid-gap: 30px; /* Increase gap for vertical stacking */
    }

    .pro-card {
        padding: 30px 15px; /* Adjust padding */
    }
    
    .pro-card img {
        width: 150px; /* Smaller image size */
        height: 150px;
    }

    /* --- Contact Form Style --- */
    .container-contact form {
        width: 90%; /* Take up most of the screen width */
        height: auto;
        padding: 20px 0;
    }

    .container-contact form h1 {
        font-size: 30px;
        width: 90%;
    }

    /* Make all inputs full width and stack them */
    .container-contact form input,
    .container-contact form #lastName,
    .container-contact form #mobile,
    .container-contact form textarea {
        width: 90%;
        margin-left: 0;
        margin-right: 0;
        min-width: unset;
        max-width: unset;
    }
    
    .container-contact form h4 {
        width: 90%;
    }
    
    .container-contact form textarea {
        min-height: 120px; /* Adjust textarea height */
        max-height: 150px;
    }

    /* --- Footer Style --- */
    .footer-container {
        padding: 40px 15px 20px;
    }

    .footer-nav ul {
        flex-wrap: wrap; /* Allow links to wrap */
    }

    .footer-nav ul li a {
        font-size: 1em; /* Smaller font size */
        margin: 5px 10px; /* Smaller margin for wrapping */
    }
}

/* ======================================================= */
/* 💻 Tablet/Medium Screen Styles (max-width: 1024px) */
/* ======================================================= */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* --- Navbar Style --- */
    .navbar {
        padding: 20px 5%;
    }                       

    /* --- Hero Content Style --- */
    .content h1 {
        font-size: 100px; /* Medium size for tablets */
    }

    .content p {
        font-size: 20px;
    }

    /* --- About Section (Team) Style --- */
    .pro-row {
        margin-left: 50px;
        margin-right: 50px;
    }

    .content-pro {
        /* Change grid to 2 columns on tablets */
        grid: auto / auto auto;
        grid-gap: 20px;
        justify-content: center; /* Center the two-column grid */
    }
    
}

/* Add this new CSS block */
/* =============================== */
/* ☰ Navbar Toggle Icon and Active State */
/* =============================== */

.menu-icon {
    display: none; /* Hidden by default on large screens */
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    z-index: 1002; /* Ensure it's on top */
}

@media screen and (max-width: 768px) {
    .menu-icon {
        display: block; /* Show icon on small screens */
    }
    
    /* State when the menu is active/open */
    .navbar .nav-links.active {
        display: flex; /* Show the menu */
        transform: translateX(0); /* Slide it in */
    }
    
    /* Change icon when menu is active */
    .menu-icon.active:before {
        content: "\f27f"; /* 'bi-x-lg' close icon from bootstrap-icons */
    }
}


@media screen and (max-width: 1080px) {
    .navbar ul li a {
        font-size: 12px;
    }
}